<!--
 * @Author:订单
 * @Date: 2021-06-29 09:29:33
 * @LastEditTime: 2021-07-03 20:11:42
 * @LastEditors: jiangsx
 * @Description: In User Settings Edit
 * @FilePath: \briup\day15\mobile-app\src\views\home\Order.vue
-->
<template>
  <div>
    <div class="mkz">订 单</div>
    <van-tabs v-model="active" @click="handleClick">
      <van-tab title="全部">
        <div
          class="mkz3"
          v-for="item in orderData"
          :key="item.id"
          @click="toClick(item.id)"
        >
          <div class="mkz1">
            <div class="img_con1">
              <van-image
                round
                width="70px"
                height="70px"
                :src="item.customer.userFace"
              />
            </div>
            <div class="mkz1_right">
              <div class="a" style="margin-top: 10px">
                <span style="font-size: 14px">{{
                  item.customer.username
                }}</span>
                <span class="a1">{{ item.status }}</span>
              </div>
              <div class="b">
                <span>
                  {{ item.address.province }}{{ item.address.city
                  }}{{ item.address.area }}{{ item.address.address }}</span
                >
              </div>
              <div class="c">
                <span>{{ item.orderTime | filteTime }}</span>
                <span class="c1">￥{{ item.total }}元</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待接单">
        <div
          class="mkz3"
          v-for="item in orderData"
          :key="item.id"
          @click="toClick(item.id)"
        >
          <div v-if="item.status == '待接单'">
            <div class="mkz1">
              <div class="img_con1">
                <van-image
                  round
                  width="70px"
                  height="70px"
                  :src="item.customer.userFace"
                />
              </div>
              <div class="mkz1_right">
                <div class="a" style="margin-top: 7px">
                  <span style="font-size: 14px">{{
                    item.customer.username
                  }}</span>
                  <span class="a1">{{ item.status }}</span>
                </div>
                <div class="b">
                  <span>
                    {{ item.address.province }}{{ item.address.city
                    }}{{ item.address.area }}{{ item.address.address }}</span
                  >
                </div>
                <div class="c">
                  <span>{{ item.orderTime | filteTime }}</span>
                  <span class="c1">￥{{ item.total }}元</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待服务"
        ><div
          class="mkz3"
          v-for="item in orderData"
          :key="item.id"
          @click="toClick(item.id)"
        >
          <div v-if="item.status == '待服务'">
            <div class="mkz1">
              <div class="img_con1">
                <van-image
                  round
                  width="70px"
                  height="70px"
                  :src="item.customer.userFace"
                />
              </div>
              <div class="mkz1_right">
                <div class="a" style="margin-top: 10px">
                  <span style="font-size: 14px">{{
                    item.customer.username
                  }}</span>
                  <span class="a1">{{ item.status }}</span>
                </div>
                <div class="b">
                  <span>
                    {{ item.address.province }}{{ item.address.city
                    }}{{ item.address.area }}{{ item.address.address }}</span
                  >
                </div>
                <div class="c">
                  <span>{{ item.orderTime | filteTime }}</span>
                  <span class="c1">￥{{ item.total }}元</span>
                </div>
              </div>
            </div>
          </div>
        </div></van-tab
      >
      <van-tab title="已完成"
        ><div
          class="mkz3"
          v-for="item in orderData"
          :key="item.id"
          @click="toClick(item.id)"
        >
          <div v-if="item.status == '已完成'">
            <div class="mkz1">
              <div class="img_con1">
                <van-image
                  round
                  width="70px"
                  height="70px"
                  :src="item.customer.userFace"
                />
              </div>
              <div class="mkz1_right" style="padding-top: 10px">
                <div class="a">
                  <span style="font-size: 14px">{{
                    item.customer.username
                  }}</span>
                  <span class="a1">{{ item.status }}</span>
                </div>
                <div class="b">
                  <span>
                    {{ item.address.province }}{{ item.address.city
                    }}{{ item.address.area }}{{ item.address.address }}</span
                  >
                </div>
                <div class="c">
                  <span>{{ item.orderTime | filteTime }}</span>
                  <span class="c1">￥{{ item.total }}元</span>
                </div>
              </div>
            </div>
          </div>
        </div></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import Moment from "moment";
import { pageQuery, info } from "@/api/order";
import { getToken } from "@/utils/auth";
import { Toast } from "vant";
export default {
  filters: {
    filteTime(v) {
      return Moment(v).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  data() {
    return {
      active: 0,
      orderData: [],
      params: {
        employeeId: 25,
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  methods: {
    async pageQuery() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      this.loading = true;
      if (this.active === "全部") {
        var b = "";
      } else {
        b = this.active;
      }
      const temp = {
        ...this.params,
        status: b,
      };
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      const res = await pageQuery(temp);
      // this.orderData = res.data.list
      this.loading = false;
      Toast.clear();
    },
    async toQuery() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      let token = getToken();
      // console.log(token);
      let mes = await info({ token });
      // console.log(mes);
      let res = await pageQuery({
        employeeId: mes.data.id,
        page: 1,
        pageSize: 10,
      });
      // console.log(res.data.id);
      this.orderData = res.data.list;
      // this.orderData = res1.data.list;
      // this.loading = false
      Toast.clear();
    },
    toClick(id) {
      // console.log(id);
      this.$router.push({
        path: "/orderDetails",
        query: {
          index: id,
        },
      });
    },
    handleClick(tab) {
      // alert(1)
      this.active = tab.title;
      this.pageQuery();
    },
  },
  watch: {
    params: {
      handler() {
        this.pageQuery();
      },
      deep: true,
    },
  },
  created() {
    this.toQuery();
    this.pageQuery();
  },
  mounted() {
    // this.getData()
  },
};
</script>
<style scoped>
.mkz {
  /* width: 100%; */
  width: auto;
  height: 58px;
  background-color: #7579ff;
  text-align: center;
  color: aliceblue;
  line-height: 58px;
}
.mkz1 {
  margin: 10px 10px 20px 32px;
  height: 7em;
  /* width: 500px; */
  width: auto;
  background-color: white;
  display: flex;
  /* border: 2px solid #f00; */
  box-shadow: 0px 0px 10px rgba(128, 128, 177, 0.5);
  border-radius: 5px;
}
.img_con1 {
  padding: 5px;
  background: linear-gradient(rgb(165, 174, 247), #f5f5f5);
  padding-top: 17px;
}
.mkz1_right {
  width: 1380px;
  /* width: auto; */
  padding: 3px 10px 5px 0px;
  background: linear-gradient(rgb(165, 174, 247), #f5f5f5);
  line-height: 20px;
  padding-top: 0.2em;
}
.a1 {
  float: right;
  color: red;
}
.c1 {
  float: right;
}
span {
  font-size: 12px;
}
.mkz3 {
  padding-right: 1.1em;
}
</style>